<template>
  <div class="home">
    <headerPhoto class="home-header">
      <div class="box">
        <h3 class="home-name text-light text-center">君惜泪</h3>
        <div class="text text-light text-center ">
          {{ message || '|' }}
        </div>
      </div>
    </headerPhoto>
    <waveView />
    <!-- </div> -->
    <div class="container">
      <section class="content mt-3">
        <div class="welcome mb-3">
          <i class="icon-welcome"></i>
          <span>欢迎光临!</span>
        </div>
        <div class="row">
          <div class="col-md-3">
            <!-- 我的个人信息卡片 -->
            <div class="card text-center user-card mb-4" style="width: 100%">
              <div class="box pt-3">
                <img src="../static/imgs/images/myUser.jpg" class="card-img-top w-50 rounded-circle" alt="头像">
              </div>
              <div class="card-body">
                <h5 class="card-title">君惜泪</h5>
                <ul class="d-flex justify-content-around p-0 mt-4">
                  <li>
                    <p>文章</p>
                    <p class="text-Emphasis">{{ total }}</p>
                  </li>
                  <li>
                    <p>分类</p>
                    <p class="text-Emphasis">3</p>
                  </li>
                  <li>
                    <p>访问量</p>
                    <p class="text-Emphasis">123413</p>
                  </li>
                </ul>
                <!-- <a href="#" class="btn btn-primary text-light">朋友圈</a> -->
                <!-- <div class="social-share" data-sites="wechat,weibo,qq,qzone,douban"></div> -->
              </div>
            </div>
            <div class="card text-center user-card mb-4" style="width: 100%">
              <div class="card-body">
                <h5 class="card-title">作者联系方式</h5>
                <ul class="p-0 mt-4">
                  <li>
                    <p>QQ: <span>2873689467</span></p>
                  </li>
                  <li>
                    <p>wx: <span>WL13blbq</span></p>
                  </li>
                  <li>
                    <p>QQ邮箱: <span>l15766804382@qq.com</span></p>
                  </li>
                </ul>
                <button @click="getRandomTextFn" class="btn btn-warning text-light">随机一言</button>
              </div>
            </div>

            <div class="randomText  mb-4 p-3">
              <i class="bi bi-chat-left-text"></i>
              <div class="text">
                <div class="text-wrap">
                  <span>{{ randomText }}</span>&nbsp;&nbsp;&nbsp;
                  <span>{{ randomText }}</span>
                </div>
              </div>
            </div>
            <div class="card msg-box  p-3">
              <h6 class="msg-title">
                <i class="bi bi-send"></i>
                最新留言
              </h6>
              <div class="msg-comment">
                <div class="msg-wrapper">
                  <div class="msg-list">
                    <div class="msg-item" v-for="(item, index) in [...msgArr, ...msgArr]" :key="`${item.id}-${index}`">
                      <div class="img">
                        <img :src="item.imgUrl" alt="">
                      </div>
                      <div class="comment">
                        {{ item.msg_text }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-9">
            <!-- 轮播图 -->
            <div v-if="bannerArr.length > 0" class="my-banner">
              <swiper :speed="800" class="rounded" :modules="modules" :autoplay="{ delay: 3000 }" :slides-per-view="1"
                navigation :pagination="{ clickable: true }" :loop="true">
                <swiper-slide v-for="(item, index) in bannerArr" :key="index">
                  <img :src="item.banner_url" :alt="item.banner_title" />
                </swiper-slide>
              </swiper>
            </div>
            <!-- 推荐文章 -->
            <div class="recom">
              <div class="recom-header">
                <div class="recom-header-left">
                  <i class="icon-gj"></i>
                  <span class="ms-1">推荐文章</span>
                </div>
                <div class="recom-header-right">more</div>
              </div>
              <van-list v-model:loading="loading" :finished="finished" finished-text="我也是有底线的~~" @load="onLoad">
                <div class="recom-content mt-3">
                  <GirdItem :articleArr="articleArr" />
                </div>
              </van-list>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script setup lang="ts">
import { host, imgUrl, getBannerList, getArticleList, getRandomText, getMsgList } from "@/api/index"

import GirdItem from '@/component/GirdItem.vue';
import headerPhoto from '@/component/headerPhoto.vue';
import waveView from '@/component/waveView.vue';
import { onMounted, onUnmounted, ref, watch } from 'vue';
import { useCounterStore } from "@/stores/counter"
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Scrollbar, A11y } from 'swiper/modules';
import 'swiper/swiper-bundle.css';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
const modules = [Autoplay, Pagination, Scrollbar, A11y]

const counter = useCounterStore();

const randomText = ref<string>('');

// 留言列表数组
interface IMsg {
  id: number;
  imgUrl: string;
  msg_text: string
}

const msgArr = ref<IMsg[]>([])
// 获取留言列表
const getMsgListFn = async () => {
  await getMsgList()
    .then(
      res => {
        msgArr.value = res.data.result.map((item: IMsg) => {
          item.imgUrl = imgUrl(item.imgUrl)
          return item
        }).slice(0, 10)
        // console.log(msgArr.value)
      }, err => {
        console.log(err)
      }
    )
}
getMsgListFn()

// 获取随机文字
const getRandomTextFn = async () => {
  await getRandomText()
    .then(
      res => {
        if (res.data.code == 200) {
          randomText.value = res.data.text
        }
      }, err => {
        console.log(err)
      }
    )
}
getRandomTextFn()


const text = ref<string>('没人在乎你的代码，只在乎实现什么功能');
const index = ref<number>(0);
const timer = ref<number | null>(null);
const message = ref<string>('');
const isTyping = ref(true); //true表示添加文字，false表示删除文字

// 文章总数量
const total = ref<number>(0);

// 获取文章列表
interface IBanner {
  id: number;
  banner_link: string;
  banner_title: string;
  banner_url: string;
}

const bannerArr = ref<IBanner[]>([])

watch(() => counter.introduction, (newVal) => {
  text.value = newVal || '没人在乎你的代码，只在乎实现什么功能';
},
  { immediate: true }
)


// 自动添加删除文字
const addTextFn = () => {
  if (timer.value) clearTimeout(timer.value);
  // 添加文字
  if (isTyping.value) {
    message.value = text.value.slice(0, index.value);
    index.value++;
    if (index.value > text.value.length) {
      isTyping.value = false;
      timer.value = setTimeout(addTextFn, 1500);
      return
    }
    // 添加文字的时间
    timer.value = setTimeout(addTextFn, 200);
  } else if (!isTyping.value) {   // 删除文字
    message.value = text.value.slice(0, index.value);
    index.value--;
    if (index.value < 0) {
      index.value = 0
      isTyping.value = true;
      timer.value = setTimeout(addTextFn, 1000);
      return
    }
    // 删除文字的时间
    timer.value = setTimeout(addTextFn, 100);
  }
}
// onMounted 当组件挂载到 DOM 后自动执行 确保在页面完全加载后再开始动画效果
onMounted(() => {
  timer.value = setTimeout(addTextFn, 500);
})
//onUnmounted 当组件被销毁前自动执行
onUnmounted(() => {
  if (timer.value) clearTimeout(timer.value);
})

// 获取轮播图数据
const getBannerListFn = async () => {
  await getBannerList()
    .then(
      res => {
        // console.log(res.data)
        const arr = res.data.result.map((item: IBanner) => ({
          id: item.id,
          banner_link: item.banner_link,
          banner_title: item.banner_title,
          banner_url: host + item.banner_url
        }))
        // console.log(arr)
        bannerArr.value = arr
      },
      err => {
        console.log(err)
      }
    )
}
getBannerListFn()

// 获取文章列表
interface IArticle {
  [key: string | number]: string | number
}

const page_num = ref<number>(1);
const page_size = ref<number>(6);
const articleArr = ref<IArticle[]>([])
const loading = ref(false);
const finished = ref(false);

const onLoad = async () => {
  // 1、 loading 设置成 true。此时可以发起异步操作并更新数据
  loading.value = true;
  page_size.value += 2;
  await getArticleListFn()

  // 数据全部加载完成  finished设置为 true
  // 判断是否加载完毕
  if (articleArr.value.length >= total.value) {
    finished.value = true;
  }
  //2、 数据更新完毕后设置为 false
  loading.value = false;
};

const getArticleListFn = async () => {
  await getArticleList({ page_num: page_num.value, page_size: page_size.value })
    .then(
      res => {
        if (res.data.code == 200) {
          articleArr.value = res.data.data
          // console.log('文章列表数据', res.data)
          total.value = res.data.total
        }

      },
      err => {
        console.log(err)
      }
    )
}
getArticleListFn()
</script>

<style lang="less" scoped>
@import "../static/css/common.less";

body {
  height: 100%;
}

&::v-deep .swiper-pagination-bullet-active {
  background-color: #FFA500 !important;
}



.randomText {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  width: 100%;
  display: flex;
  align-items: center;

  // overflow: hidden;
  i {
    margin-right: 10px;
    flex-shrink: 0;
  }

  .text {
    flex: 1;
    overflow: hidden;

    .text-wrap {
      display: flex;
      width: max-content;
      animation: move 10s linear infinite;

      span {
        display: block;
        padding-right: 20px;
        flex-shrink: 0;
      }
    }

  }


}

@keyframes move {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.home {
  width: 100%;
  padding-bottom: 50px;

  .home-header {
    .box {
      // padding-top: 110px;

      .home-name {
        font-size: 40px;
      }

      .text {
        height: 50px;
        line-height: 50px;
        padding: 0 15px;
        font-size: 18px;
        margin-top: 5px;
        display: inline-block;
        border-radius: 8px;
        background-color: rgba(27, 27, 27, 0.4);
      }
    }

  }


}

@media (max-width: 768px) {
  .my-banner {
    // margin-top: 20px;
    display: none;
  }

}

.content {
  width: 100%;
  min-height: 700px;

  .user-card {
    background: linear-gradient(225deg,
        #b6f3dc 0%,
        #b7cef7 50%,
        #f8c5ea 100%,
      );
    border: none;
    transition: all 0.3s ease-in-out;

    &:hover {
      transform: translateY(-10px);
      box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
    }
  }

  .my-banner {
    width: 100%;
    height: 300px !important;

    .swiper {
      height: 100%;
    }

    img {
      width: 100%;
      height: 100%;

    }
  }

  .welcome {
    width: 100%;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;

    .icon-welcome {
      width: 25px;
      height: 25px;
      background-image: url(../static/imgs/icon/icon-welcome.png);
      background-size: cover;
    }

    span {
      vertical-align: middle;
      margin-left: 25px;
      color: @grey-color;
    }
  }

  .recom {
    width: 100%;

    margin-top: 20px;

    .recom-header {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .recom-header-left {
        .icon-gj {
          width: 25px;
          height: 25px;
          background-image: url(../static/imgs/icon/icon-gj.png);
          background-size: cover;

        }

        span {
          vertical-align: middle;
          color: @grey-color;
        }
      }

      .recom-header-right {
        color: @grey-color;
        cursor: pointer;
      }
    }
  }

  @keyframes msgMove {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-50%);
    }

  }

  .msg-box {
    width: 100%;
    background-image: url(../static/imgs/images/home-bg3.jpg);
    background-size: cover;
    background-position: center;
    border: none;

    .msg-title {
      color: #000;
      font-size: 20px;
      padding: 10px 0;
    }
  }

  .msg-comment {
    width: 100%;
    height: 350px;
    overflow: hidden;
    color: #fff;
    font-weight: normal !important;
    position: relative;

    .msg-wrapper {
      height: 100%;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }

    .msg-list {
      animation: scroll 15s linear infinite;
      padding: 0;
      margin: 0;


      &:hover {
        animation-play-state: paused;
      }
    }

    .msg-item {
      display: flex;
      padding: 5px 0;
      width: 100%;


      .img {
        width: 40px;
        height: 40px;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .comment {
        margin-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: calc(100% - 60px);
        height: 40px;
        line-height: 40px;
      }
    }
  }

  @keyframes scroll {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-50%);
    }
  }
}
</style>
